import React from 'react';
class TodoItem extends React.Component {
    handleToggle = () => {
        this.props.onToggle(this.props.index);
    };
    render() {
        return (
            <li>
                <input
                    type="checkbox"
                    checked={this.props.todo.completed}
                    onChange={this.handleToggle}
                />
                <span style={{ textDecoration: this.props.todo.completed ? 'line-through' : 'none' }}>
                    {this.props.todo.text}
                </span>
            </li>
        );
    }
}

class TodoList extends React.Component {
    render() {
        return (
            <ul>
                {this.props.todos.map((todo, index) => (
                    <TodoItem key={index} index={index} todo={todo} onToggle={this.props.onToggle} />
                ))}
            </ul>
        );
    }
}

class AddTodo extends React.Component {
    state = { input: "" };

    handleChange = event => {
        this.setState({ input: event.target.value });
    };

    handleSubmit = event => {
        event.preventDefault();
        this.props.onAdd(this.state.input);
        this.setState({ input: "" });
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type="text"
                    value={this.state.input}
                    onChange={this.handleChange}
                />
                <button type="submit">添加</button>
            </form>
        );
    }
}

class TodoApp extends React.Component {
    state = {
        todos: [],
        filter: "all",
    };

    handleAdd = todo => {
        this.setState(prevState => ({
            todos: [...prevState.todos, { text: todo, completed: false }],
        }));
    };

    handleToggle = index => {
        this.setState(prevState => {
            const todos = [...prevState.todos];
            todos[index].completed = !todos[index].completed;
            return { todos };
        });
    };

    handleFilterChange = event => {
        this.setState({ filter: event.target.value });
    };

    getVisibleTodos = () => {
        switch (this.state.filter) {
            case "all":
                return this.state.todos;
            case "completed":
                return this.state.todos.filter(todo => todo.completed);
            case "incomplete":
                return this.state.todos.filter(todo => !todo.completed);
            default:
                return this.state.todos;
        }
    };

    render() {
        return (
            <React.Fragment>
                <AddTodo onAdd={this.handleAdd} />
                <div onChange={this.handleFilterChange}>
                    <input type="radio" value="all" name="filter" defaultChecked id="all-todos" /><label htmlFor="all-todos">全部</label>
                    <input type="radio" value="completed" name="filter" id="completed-todos" /> <label htmlFor="completed-todos">已完成</label>
                    <input type="radio" value="incomplete" name="filter" id="incomplete-todos" /> <label htmlFor="incomplete-todos">未完成</label>
                </div>
                <TodoList todos={this.getVisibleTodos()} onToggle={this.handleToggle} />
            </React.Fragment>
        );
    }
}

export default TodoApp;